import { computed, reactive, ref, watch } from 'vue'
import { Viewer } from '@/types'

/** 控件数据来源 */
export default function useWidgetSource(viewer: Viewer) {
  /** 指定来源并需要填写的控件 */
  const sourceWidgets = computed(() => viewer.widgets.filter(w => w.isUse && w.sourceItem))

  /** 加载中 */
  const loading = ref(false)

  /** 来源数据 */
  const data = ref<Record<string, string>>({})

  /** 加载 */
  async function load() {
    const loader = viewer.widgetSourceLoader

    if (!loader) return

    loading.value = true

    try {
      data.value = (await loader(sourceWidgets.value)) || {}

      fill()
    } finally {
      loading.value = false
    }
  }

  /** 填写加载到的数据 */
  function fill() {
    const result = data.value

    sourceWidgets.value.forEach(w => {
      w.value = result[w.source || ''] || ''
    })
  }

  /** 监听数据源控件，如果开启自动加载则加载数据 */
  watch(
    sourceWidgets,
    widgets => {
      if (widgets.length && viewer.widgetSourceAutoLoad) {
        load()
      }
    },
    { immediate: true }
  )

  return reactive({
    /** 加载中 */
    loading,

    /** 加载数据源 */
    load
  })
}
